import App from "next/app";
import Router from "next/router";
import Link from "next/link";
import React from "react";
import { Provider } from "react-redux";

import testHoc from "../lib/with-redux";
import "antd/dist/antd.css"; // 这里的css样式直接作用于Container组件
import MyLayout from "../components/Layout";
import PageLoading from "../components/PageLoading";
import axios from "axios";

class MyApp extends App {
  state = {
    context: "value",
    loading: false,
  };
  startLoading = () => {
    this.setState({ loading: true });
  };
  stopLoading = () => {
    this.setState({ loading: false });
  };

  componentDidMount() {
    Router.events.on("routeChangeStart", this.startLoading);
    Router.events.on("routeChangeComplete", this.stopLoading);
    Router.events.on("routeChangeError", this.stopLoading);
  }
  componentWillUnmount() {
    Router.events.off("routeChangeStart", this.startLoading);
    Router.events.off("routeChangeComplete", this.stopLoading);
    Router.events.off("routeChangeError", this.stopLoading);
  }

  static async getInitialProps(ctx) {
    const { Component } = ctx;
    let pageProps = {};
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }
    return {
      pageProps,
    };
  }

  render() {
    const { Component, pageProps, reduxStore } = this.props;
    return (
      <Provider store={reduxStore}>
        {this.state.loading ? <PageLoading /> : null}
        <MyLayout>
          <Component {...pageProps} />
        </MyLayout>
      </Provider>
    );
  }
}

export default testHoc(MyApp);
